<template>
    <a-render>
        <template #leftheader>
            <div class="dis-flex flex-align-center">
               花木成畦手自栽
            </div>
        </template>
        <template #rightheader>
            <a-button type="primary" @click="submit">确认</a-button>
        </template>
        <Form ref="formRef" label-align="left" :style-col="{ style: { width: '210px' } }" :wrapper-col="12" :list="state.controlList" :fields="state.fields">
             <template #card_number>
                <a-input disabled v-model:value="state.fields.card_number" />
                <a-button @click="handleCreateCard">建卡</a-button>
             </template>
        </Form>
    </a-render>
</template>
<script setup>
import { onMounted, reactive } from "vue"
import { useRouter, useRoute } from "vue-router"
import Form from "@/components/form/index.vue"
import Select from "@/components/control/select/index.vue"
import { createcrad, udpateupdate, readersDetailed } from "@/api"
import { message } from "ant-design-vue"
const route = useRoute()
const state = reactive({
    id: route.query?.id,
    defaultArea: [],
    controlList: [
      { 
        label: "读者头像", 
        field: "face", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "姓名", 
        field: "user_name", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "性别", 
        field: "gender", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "手机号", 
        field: "phone", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "身份证", 
        field: "card_id", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "出生日期", 
        field: "birth_date", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "邮箱", 
        field: "email", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "省市区", 
        field: "province", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "详细地址", 
        field: "address", 
        control: "input", 
        maxlength: 20,
      },

      { 
        label: "卡号", 
        field: "card_number", 
        control: "input", 
        maxlength: 20,
        type: "slot",
        slotName: "card_number"
      },
        { 
        label: "是否启用", 
        field: "library_name", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "办证日期", 
        field: "card_date", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "截止日期", 
        field: "deadline_date", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "建档人", 
        field: "admin_id", 
        control: "input", 
        maxlength: 20,
      },
      { 
        label: "状态", 
        field: "status", 
        control: "input", 
        maxlength: 20,
      },
    ],
    fields: {
        card_number: "",
        face: "",
        user_name: "",
        gender: "",
        phone: "",
        card_id: "",
        birth_date: "",
        email: "",
        province: "",
        city: "",
        area: "",
        address: "",
        card_date: "",
        deadline_date: "",
        admin_id: "",
        enable: 1
    }
  })

  const handleCreateCard = () => {
    createcrad().then(res => {
        state.fields.card_number = res.content
    })
  }

  const getUserDetailed = () => {
    readersDetailed({id: state.id}).then(res => {
        console.log(111, res)
        state.fields = res.content
    })
  }

  const submit = () => {
    if(!state.fields.card_number) {
        message.error('卡号不能为空')
        return 
    }
    udpateupdate({
        ...state.fields,
        id: state.id,
        enable: 1
    }).then(res => {
        console.log(11)
    })
  }

  onMounted(() => {
    getUserDetailed()
  })
</script>